/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:25:36
 */

import FabricText from "@/myFabric/FabricText";
import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import { SketchPicker } from "react-color";
import designTemplateEditorStore from "../../designTemplateEditorStore";
import designTemplateEditor from "../../designTemplateEditorer";
import DesignTemplateColorPick from "../DesignTemplateColorPick/DesignTemplateColorPick";
import styles from "./toolTextColor.module.less";

interface Iprops {
}

// 颜色工具
export default function TooTextlColor() {

    const showTop = useRef(false);
    const [visible, setVisible] = useState(false);
    const [color, setColor] = useState("#ffffff");
    const [disable, setDisable] = useState(false);

    useEffect(() => autorun(() => {
        const { activeObjectId, lock } = designTemplateEditorStore;
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObjectId && activeObject && activeObject.type === "i-text") {
            const { fill = "#000000" } = activeObject as FabricText;
            setDisable(lock);
            setColor(fill as string);
            setVisible(true);
        } else {
            setVisible(false);
        }
    }), []);

    // 响应吸色器的颜色拾取
    useEffect(() => autorun(() => {
        const { pickerColor } = designTemplateEditorStore;
        if (showTop.current) {
            designTemplateEditor.setActiveFill(pickerColor);
            setColor(pickerColor);
        }
    }), []);

    return (
        <Tooltip
            title={

                <div className={styles.color_picker} >
                    <SketchPicker
                        color={color}
                        className={styles.SketchPicker}
                        onChange={(color: any) => {
                            designTemplateEditor.setActiveFill(color.hex);
                            setColor(color.hex);
                        }}
                    />
                    <DesignTemplateColorPick />
                </div>
            }
            onOpenChange={open => {
                showTop.current = open;
            }}
            trigger={['click']}
            color={"#00000000"}
            placement="bottom"
        >
            <div className={clsx(styles.toolTextColor, visible && styles.visible, disable && styles.disable)} >
                文字颜色
                <span className={styles.colorBlock} style={{ backgroundColor: color }} ></span>
            </div>

        </Tooltip>
    );

}